<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input v-model="queryParams.supplierName" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="供应商负责人" prop="supplierDirector">
        <el-input
          v-model="queryParams.supplierDirector"
          placeholder="请输入供应商负责人"
          clearable
        />
      </el-form-item>
      <el-form-item label="供应商电话" prop="supplierMobile">
        <el-input v-model="queryParams.supplierMobile" placeholder="请输入供应商电话" clearable />
      </el-form-item>
      <el-form-item label="供应商性质" prop="supplierProperty">
        <el-select
          v-model="queryParams.supplierProperty"
          placeholder="请输入供应商性质"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['material:supplier:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['material:supplier:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      adaptive
      height-per="90"
      :page-data="queryData"
      save-key="MaterialSupplier"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['material:supplier:update']"
        />
        <context-menu-item
          label="删除"
          @click="handleMenuDelete(row)"
          v-hasPermi="['material:supplier:delete']"
        />
      </template>
      <template #supplierStatus="{ row }">
        {{ row.supplierStatus == 1 ? '停用' : '使用' }}
      </template>
      <template #supplierProperty="{ row }">
        {{ supplierProperty[row.supplierProperty].label }}
      </template>
    </Table>
  </ContentWrap>
  <MaterialSupplierEdit ref="editFormRef" @success="getPage" />
</template>
<script setup name="MaterialSupplier" lang="ts">
import * as materialSupplierApi from '@/api/material/supplier'
import MaterialSupplierEdit from './MaterialSupplierEdit.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
const queryFormRef = ref()
const editFormRef = ref()
const queryParams = ref({
  supplierName: undefined,
  supplierDirector: undefined,
  supplierMobile: undefined,
  supplierProperty: undefined
})
const queryData = ref()
const supplierProperty = getIntDictOptions(DICT_TYPE.MATERIAL_SUPPLIER_PROPERTY)
const columns = [
  {
    label: '供应商名称',
    prop: 'supplierName'
  },
  {
    label: '供应商负责人',
    prop: 'supplierDirector'
  },
  {
    label: '供应商地址',
    prop: 'supplierAddress'
  },
  {
    label: '供应商电话',
    prop: 'supplierMobile'
  },
  {
    label: '供应商状态',
    prop: 'supplierStatus',
    slot: 'supplierStatus'
  },
  {
    label: '供应商性质',
    prop: 'supplierProperty',
    slot: 'supplierProperty'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]

onMounted(() => {
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await materialSupplierApi.pageQuery(queryParams.value)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理Table双击事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 删除 */
const handleMenuDelete = (row) => {
  materialSupplierApi.deleted(row.id)
}
</script>
